import {
    init,
    classModule,
    propsModule,
    styleModule,
    eventListenersModule,
    h,
} from "snabbdom";

// 1 创建虚拟节点
let vnode1 = h('ul', {}, [
    h('li', { key: 'A' }, 'A'),
    h('li', { key: 'B' }, 'B'),
    h('li', { key: 'C' }, 'C'),
    h('li', { key: 'D' }, 'D')
])

const patch = init([classModule, propsModule, styleModule, eventListenersModule])

let container = document.getElementById('container')
patch(container, vnode1)

btn.onclick = () => {
    /* 1 key值的重要性，进行最小量化更新 */
    // key唯一标识不添加，会将EF先添加到后面，再往前进行改变，导致全量更新了
    // key加了之后，则会进行最小量更新，告诉 diff算法，在更改前后它们是同一个DOM节点
    // let vnode2 = h('ul', {}, [
    //     h('li', { key: 'E' }, 'E'),
    //     h('li', { key: 'F' }, 'F'),
    //     h('li', { key: 'A' }, 'A'),
    //     h('li', { key: 'B' }, 'B'),
    //     h('li', { key: 'C' }, 'C'),
    //     h('li', { key: 'D' }, 'D'),

    // ])
    // patch(vnode1, vnode2)

    /* 2 当更新的父节点不为同一个，则会进行暴力拆除（全量更新） */
    // let vnode2 = h('ol', {}, [
    //     h('li', { key: 'E' }, 'E'),
    //     h('li', { key: 'F' }, 'F'),
    //     h('li', { key: 'A' }, 'A'),
    //     h('li', { key: 'B' }, 'B'),
    //     h('li', { key: 'C' }, 'C'),
    //     h('li', { key: 'D' }, 'D'),

    // ])
    // patch(vnode1, vnode2)

    /* 3 同层比较：只有层级为一样才会进行更新比较，否则依旧是暴力拆除 */
    let vnode2 = h('ul', {}, h('section', {}, [
        h('li', { key: 'E' }, 'E'),
        h('li', { key: 'F' }, 'F'),
        h('li', { key: 'A' }, 'A'),
        h('li', { key: 'B' }, 'B'),
        h('li', { key: 'C' }, 'C'),
        h('li', { key: 'D' }, 'D'),

    ]))
    patch(vnode1, vnode2)
}